<!DOCTYPE html>
<html lang="en">
	<head>
		<title>nTube.</title>
		<meta name="application-name" content="nTube" />
		<meta name="robots" content="noindex, nofollow" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta name="iwebkit-use-fruit-styled-layout" value="true;version=2" />
		<meta name="description" content="nTube: Video page, a video would be here. [NextUI]" />
		<meta charset="UTF-8" />
		<meta name="theme-color" content="#111111" />
		<link rel="manifest" href="/manifest.json" />
		<style>
			html {
				--root-background-color: #111111;
				--root-color: white;
				--root-font: sans-serif;
				--flat-box-border: 1px solid rgba(255, 255, 255, 0.2);
				--flat-box-shadow: 0 14px 28px rgba(255, 255, 255, 0.08), 0 10px 10px rgba(255, 255, 255, 0.08);
			}

			head,
			body {
				color: var(--root-color, #333333);
				background-color: var(--root-background-color, white);
				font-family: var(--root-font, "sans-serif");
			}

			.poly-item {
				padding-left: 5px;
				box-shadow: var(--flat-box-shadow, "0 14px 28px rgba(255, 255, 255, 0.08), 0 10px 10px rgba(255, 255, 255, 0.08)");
				border: var(--flat-box-border, "1px solid rgba(255, 255, 255, 0.2)");
				margin-bottom: 10px;
			}

			.nlang-string {
				content: "";
			}

			.menu {
				position: fixed;
				top: 0;
				margin: auto;
				left: 0;
				right: 0;
				width: 100%;
				height: 32px;
				border-bottom: 1px solid rgba(68, 68, 68, 0.875);
				background-color: #111111;
				margin-right: 0px;
				margin-left: -1px;
				z-index: 15;
			}
		</style>
		<link rel="preload" href="resources/promise-queues.js" as="script" />
		<link rel="preload" href="resources/libWeb.js" as="script" />
		<link rel="preload" href="resources/base.js" as="script" />
		<link rel="preload" href="resources/search.js" as="script" />
		<link rel="preload" href="resources/new_ui.js" as="script" />
		<link rel="preload" href="resources/ntube-globals.js" as="script" />
		<link rel="preload" href="resources/search.css" as="style" />
		<link rel="preload" href="resources/new_ui.css" as="style" />
		<script src="resources/promise-queues.js"></script>
		<script src="resources/libWeb.js"></script>
		<script src="resources/base.js"></script>
		<script src="resources/lang.js"></script>
		<script src="resources/new_ui.js"></script>
		<script src="resources/ntube-globals.js"></script>
		<script src="resources/search.js"></script>
		<link rel="stylesheet" type="text/css" href="resources/search.css" />
		<link rel="stylesheet" type="text/css" href="resources/new_ui.css" />
		<!-- TODO: New Menu. -->
	</head>

	<body>
		<div class="menu" style="background: repeating-linear-gradient(125deg, #111111, rgba(212, 132, 1, 0.15) 8px)">
			<div style="float: left; width: auto; min-width: 20%; margin-top: 8px">
				<p style="display: inline; padding-left: 5px; line-height: 20%; vertical-align: middle; font-weight: bold; font-size: large; margin-top: 15px">
					<span style="color: red">n</span><span style="color: rgb(92, 250, 158)">T</span>
					<sub id="ntube_version_main_menu_label" style="font-size: xx-small; line-height: 20%; font-family: monospace">nUI-indev</sub>
				</p>
				&nbsp;&centerdot;&nbsp;
				<span class="nlang-string" ntube-lang-fallback="This UI is experimental and subject to change." ntube-lang-key="ntube.lang.experimental_ui_warning" style="line-height: 60%; color: orangered"></span>
			</div>
			<div style="float: right; height: 100%">
				<div style="height: 100%">
					<style>
						#search_overlay {
							z-index: 8;
							position: fixed;
							background-color: rgba(17, 17, 17, 0.95);
							width: 100%;
							height: 100%;
							top: 0px;
							left: 0px;
						}

						.search_hidden {
							display: none;
							visibility: hidden;
						}

						#search_bar {
							background-color: inherit;
							color: inherit;
							border: none;
							border-left: 1px solid green;
							height: 31px !important;
							width: 40vw;
							transition: border-left 0.5s ease-in-out;
							font-family: monospace;
							font-size: large;
							padding-left: 5px;
						}

						#search_bar:focus {
							border-left: 1px solid firebrick;
						}

						#search_button {
							border: none;
							border-left: 1px solid rgba(0, 128, 0, 0.7);
							border-right: none;
							height: 100%;
							background-color: inherit;
							color: inherit;
							margin-right: 0px;
							font-family: inherit;
						}
					</style>
					<input id="search_bar" type="text" name="Search nTube Bar." placeholder="Search nTube." style="vertical-align: middle" /><button id="search_button" onclick="search_start(null);" style="vertical-align: middle">
						Search
					</button>
					<script>
						run_promise(function () {
							if (window.SearchBar && window.SearchBar.init) window.SearchBar.init();
						});
					</script>
				</div>
			</div>
			<div style="clear: both"></div>
		</div>
		<div id="loading-indicator" style="z-index: 3; position: sticky; left: 50%; top: 42%">
			<div class="container">
				<i class="layer"></i>
				<i class="layer"></i>
				<i class="layer"></i>
			</div>
		</div>
		<div id="search_overlay" class="search_hidden">
			<div style="padding-bottom: 30px"></div>
			<div id="search-top-ui" style="width: 100%; color: white">
				<div style="float: left; padding-left: 5px">
					<h1 style="margin-top: 5px; margin-bottom: 5px">Search.</h1>
					<h3 style="margin-top: 5px; margin-bottom: 10px">Searching for <span id="search_query_display_string">uhhh...nothing.</span>.</h3>
				</div>
				<div style="float: right; padding-right: 15px; padding-top: 20px">
					<button style="width: 100px; height: 50px; border-radius: 30px; border: 1px solid green; background-color: inherit; color: inherit; font-family: inherit" onclick="search_close()">Close.</button>
					<script>
						function search_close() {
							id("search_overlay").classList.add("search_hidden");
						}
					</script>
				</div>
				<div style="clear: both"></div>
			</div>
			<div id="_search_results" class="poly-item" style="width: calc(100% - 20px); height: calc(100% - 170px); margin-right: 0px; overflow-y: auto; color: white; margin-left: 5px">
				<div class="search-item">
					<a class="search-link" href="#gotoShittyVideo">
						<img decoding="async" src="" alt="TOTALLY NOT CLICKBAIT" style="padding-left: 5px; display: inline; vertical-align: middle; width: 220px; height: 160px; margin-bottom: 5px" />
						<div style="padding-left: 15px; display: inline; vertical-align: middle">
							<p style="position: absolute; display: inline; vertical-align: middle; font-size: large; margin-top: 15px">CLICKBAIT TITLE</p>
							<p style="position: absolute; display: inline; vertical-align: bottom; font-size: small; margin-top: 45px">00:00 &centerdot; -1 &centerdot; <a href="#gotoShittyChannel">CHANNEL #2492049</a></p>
						</div>
					</a>
				</div>
			</div>
			<center>
				<button id="_search_load_more">Load more.</button>
			</center>
			<script>
				run_promise(function () {
					id("_search_results").innerHTML = "";
				});
			</script>
		</div>
		<div style="margin-top: 38px">
			<div class="poly-item" style="border: 1px solid orange; display: none; visibility: hidden" id="error_div">
				<h3 id="error_title">Error.</h3>
				<p id="error_string">$Error.string</p>
			</div>
			<div style="float: left; width: 100%">
				<!-- width was 80%. -->
				<div id="nplayer-ui-main-div">
					<div id="__video_div_element" class="poly-item" style="padding: 0px; margin: 0px">
						<video id="__video_player" controls="true" autoplay="true" style="width: 100%; height: 84vh; border: 0px; margin-bottom: -1px; background-color: var(--root-background-color, black); display: block"></video>
					</div>
				</div>
				<div class="poly-item" redesign-doc="NEXT_UI_SEGMENT_VIDEO_INFO" style="margin-top: 5px; margin-bottom: 5px">
					<h3 id="video_title" style="line-height: 80%; margin-bottom: 5px" redesign-id="TITLE_VIDEO" class="nlang-string" ntube-lang-fallback="Loading." ntube-lang-key="ntube.lang.video_title_holder"></h3>
					<div style="display: inline-table">
						<p id="channel_title" title="Channel Name" redesign-id="CHANNEL_NAME" style="margin-top: 0px; display: inline-table">...</p>
						&nbsp;&centerdot;&nbsp;
						<p id="view_count_string" title="Views." redesign-id="VIEW_COUNT" style="margin-top: 0px; display: inline-table">0</p>
						&nbsp;&centerdot;&nbsp;
						<p id="video_duration" title="Video Duration." redesign-id="VIDEO_DURATION" style="margin-top: 0px; display: inline-table">00:00</p>
					</div>
				</div>
				<div class="poly-item" redesign-doc="NEXT_UI_SEGMENT_FURTHER_VIDEO_INFO" style="width: calc(100% - 7px); margin-bottom: 5px">
					<style id="collapsible-css">
						.active,
						.collapsible:hover {
							background-color: #555;
						}
					</style>
					<style>
						.collapsible {
							background: inherit;
							border: none;
							border-bottom: 1px solid rgba(255, 255, 255, 0.5);
							color: inherit;
							cursor: pointer;
							padding: 12px;
							margin-left: -5px;
							width: calc(100% + 5px);
							text-align: left;
							outline: none;
							font-size: 15px;
							font-family: inherit;
						}

						.content {
							padding: 0 18px;
							max-height: 0;
							overflow: hidden;
							transition: max-height 0.3s cubic-bezier(0.79, 0.14, 0.15, 0.86);
							background-color: inherit;
						}
					</style>
					<button class="collapsible">Description.</button>
					<div class="content">
						<style>
							a {
								color: inherit;
								text-decoration: underline dotted white;
							}
						</style>
						<p id="description_content" style="font-size: small; white-space: normal">No description provided.</p>
					</div>
				</div>
			</div>
			<div style="float: right; height: 80%; width: 100%; margin-left: 5px">
				<!-- width was 19.6%. -->
				<div class="poly-item">
					<h3 class="nlang-string" ntube-lang-fallback="Related." ntube-lang-key="ntube.lang.related_video_holder" style="line-height: 60%"></h3>
					<div id="related_div">
						<!--<div style="display: table;">
							<img style="width: 160px; height: 90px; vertical-align: middle; display: table-row;" src="https://i.ytimg.com/vi/PYZrO04MJS4/hqdefault.jpg">
							<div style="vertical-align: middle; display: table-cell; padding-left: 5px; padding-right: 5px;">
								<h3 style="vertical-align: middle; margin: 0px auto;">youre waifu</h3>
								<p style="vertical-align: bottom; margin: 5px 0px; font-size: small;">is trash &centerdot; because I &centerdot; said so.</p>
							</div>
						</div>-->
					</div>
				</div>
			</div>
			<div style="clear: both"></div>
			<!--
			<div redesign-doc="NEXT_UI_SEGMENT_VIDEO_AND_REL_CONT" style="width: 100%; height: 80%; object-fit: cover;">
				<div style="float: right;">  
				</div>
			</div>-->
		</div>
		<div id="extras-tab-full" class="extras-tab-pre" style="display: none; visibility: hidden">
			<div class="extras-tab-header" style="padding-left: 5px; padding-top: 5px; width: 100%; height: 32px; background-color: #333333">
				<h3 id="extras-tab-header-title" style="margin-top: 0px; vertical-align: middle; float: left">[...]</h3>
				<button id="extras-tab-header-exit-button" class="extras-tab-button extras-tab-exit-button">X</button>
				<div style="width: 32px; height: 32px; margin-right: 50px; float: right; margin-right: 0px"></div>
				<div style="clear: both"></div>
			</div>
			<div id="extras-tab" class="extras-tab"></div>
		</div>
		<script>
			run_task(function () {
				nTubeLocale.init();
			}, libWeb.TaskDispatcher.TaskPriority.BLOCKING_TASK);
			run_task(function () {
				const VIDEO_ID = getQueryVariable("v");
				if (VIDEO_ID !== null && VIDEO_ID !== undefined) {
					loadVideo(VIDEO_ID);
				}
			}, libWeb.TaskDispatcher.TaskPriority.BACKGROUND_TASK);
		</script>
		<script type="text/javascript">
			var coll = document.getElementsByClassName("collapsible");
			var i;

			for (i = 0; i < coll.length; i++) {
				coll[i].addEventListener("click", function () {
					this.classList.toggle("active");
					var content = this.nextElementSibling;
					var possHeight = content.attributes.getNamedItem("maxHeight");
					if (content.style.maxHeight) {
						content.style.maxHeight = null;
					} else if (possHeight != null) {
						content.style.maxHeight = possHeight.value;
					} else {
						content.style.maxHeight = content.scrollHeight + "px";
					}
				});
			}
		</script>
	</body>
</html>
